import React, { memo,useEffect,useRef} from 'react'
import {shallowEqual, useDispatch,useSelector} from 'react-redux'
import { Carousel } from 'antd';

import {getNewAlbumData} from '../../store/actionCreators'

import HYRecommendHeader from '@/components/theme-header-rcm'
import HYRadioCover from '@/components/radio-cover'
import {HYNewAlbumContent,HYRecommendMain} from './style'
export default memo(function HYNewAlbum() {
    // redux hook
    //取store中数据
    const state = useSelector(state => ({
        newAlbum:state.getIn(['recommend','newAlbum'])
    }),shallowEqual)
    //发请求用的
    const dispatch = useDispatch()

    //other hook
    useEffect(() => {
        dispatch(getNewAlbumData(10))
    }, [dispatch])
    //获取节点的hook 其中current 属性中保存一个可变值的“盒
    const PageRef = useRef()
    return (
        <HYNewAlbumContent>
            <HYRecommendHeader title='新碟上架' params={[]}></HYRecommendHeader>
            <HYRecommendMain>
                <span className='btn btn-left' onClick={e=>PageRef.current.prev()}></span>
                    <Carousel className='roll' ref={PageRef} dots={false}>
                    {
                        [0,1].map((item)=>{
                            return (
                                <div key={item} className='car-content'>
                                    {
                                        state.newAlbum.slice(item*5,(item+1)*5).map((i)=>{
                                            return <HYRadioCover key={i.id} info={i} width={100} heigth={100}></HYRadioCover>
                                        })
                                    }
                                 </div>
                            )
                        })
                    }
                    </Carousel>
                <span className='btn btn-right'  onClick={e=>PageRef.current.next()}></span>
            </HYRecommendMain>
        </HYNewAlbumContent>
    )
})
